<template>
  <div class="geo-container">
    <a-row class="flex justify-center">
      <h1>GEO优化资料提交</h1>
    </a-row>
    <a-spin :spinning="loading1 || loading2">
      <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
        <a-form-item name="company">
          <template #label>
            <span> 公司全称<span class="warning">（必填）</span> </span>
          </template>
          <a-input v-model:value="formData.company" maxlength="50" showCount />
        </a-form-item>

        <a-form-item name="brand">
          <template #label>
            <span> 品牌简称<span class="warning">（此处填写品牌报表的品牌训练词）</span> </span>
          </template>
          <a-input v-model:value="formData.brand" maxlength="50" showCount />
        </a-form-item>

        <a-form-item label="确认搜索结果页展示的公司名称" name="companyName">
          <a-input v-model:value="formData.companyName" maxlength="50" showCount />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item>
              <template #label>
                <span> 企业官网<span class="warning">（有填写，没有可不填）</span> </span>
              </template>
              <a-input v-model:value="formData.url" maxlength="100" showCount />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="contact">
              <template #label>
                <span> 联系方式<span class="warning">（必填，且只能填写1个）</span> </span>
              </template>
              <a-input v-model:value="formData.contact" maxlength="100" showCount />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item name="area">
              <template #label>
                <span> 厂房面积<span class="warning">（必填）</span> </span>
              </template>
              <a-input
                v-model:value="formData.area"
                maxlength="100"
                placeholder="制造业可填写厂房面积如3万平方米；服务行业可填写实际办公面积，或者门店数量"
                showCount
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="sales">
              <template #label>
                <span> 年销售额<span class="warning">（必填）</span> </span>
              </template>
              <a-input
                v-model:value="formData.sales"
                maxlength="100"
                placeholder="可填写年产值XXX万或者年产值XXX吨/XXX件产品，或者服务客户数量"
                showCount
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item name="employee">
              <template #label>
                <span> 在职员工<span class="warning">（必填）</span> </span>
              </template>
              <a-input
                v-model:value="formData.employee"
                maxlength="100"
                placeholder="可填写如：在职员工xx人，技术人员xx人"
                showCount
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="品牌客户">
              <a-input
                v-model:value="formData.brandClient"
                maxlength="100"
                placeholder="有填写，没有可不写"
                showCount
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="关键词组合">
          <a-tabs
            v-model:activeKey="reactiveData.index"
            type="editable-card"
            @edit="handleTabsEdit"
            @change="handleTabChange"
          >
            <a-tab-pane
              v-for="(item, index) in formData.keywordList"
              :key="index"
              :closable="!isDisabled"
              :tab="renderTabLabel(item, index)"
            >
              <div>
                <a-button
                  class="mr-2 mb-2"
                  v-for="item in keywordList"
                  :danger="activeKeyword === item.id"
                  :key="item.name"
                  @click="checkKeyword(item)"
                >
                  {{ item.name }}
                </a-button>
              </div>
              <div class="textarea-group">
                <template
                  v-for="(key, index) in [
                    { prop: 'a', label: 'A区(前缀1)' },
                    { prop: 'b', label: 'B区(前缀2)' },
                    { prop: 'c', label: 'C区(核心关键词)' },
                    { prop: 'd', label: 'D区(通义词)' },
                    { prop: 'e', label: 'E区(推荐词)' },
                    { prop: 'f', label: 'F区(疑问词)' }
                  ]"
                  :key="index"
                >
                  <a-form-item :label="key.label" :name="key.prop" class="item">
                    <a-textarea v-model:value="item[key.prop]" :rows="10" />
                  </a-form-item>
                </template>
              </div>
              <div class="mb-2 text-center">
                <span>组词类型：</span>
                <a-checkbox :indeterminate="isIndeterminate" :checked="isCheckAll" @change="onCheckAllChange">
                  全选
                </a-checkbox>

                <a-checkbox-group v-model:value="checkedList">
                  <template v-for="item in options" :key="item.value">
                    <a-checkbox :value="item.value">
                      {{ item.label }}
                    </a-checkbox>
                  </template>
                </a-checkbox-group>
              </div>
              <div class="mb-2 text-center">
                <a-button type="primary" @click="generateFixedKeywords(item)">预览关键词</a-button>
              </div>
              <a-form-item label="营业执上传" name="fileArray1">
                <FileUploader
                  v-model="item.fileArray1"
                  accept="png,.jpg,.jpeg"
                  :previewMode="isDisabled"
                  :multiple="true"
                  tips="上传图片"
                />
              </a-form-item>
              <a-form-item label="产品/公司宣传图" name="fileArray2">
                <FileUploader
                  v-model="item.fileArray2"
                  accept="png,.jpg,.jpeg"
                  :previewMode="isDisabled"
                  :multiple="true"
                  tips="上传图片"
                />
              </a-form-item>
              <a-form-item name="fileArray3">
                <template #label>
                  <span> 其他素材<span class="warning">（涉及认证资质、行业资质等资料有涉及到提交）</span> </span>
                </template>
                <FileUploader :previewMode="isDisabled" v-model="item.fileArray3" :multiple="true" />
              </a-form-item>
              <div><a-button type="primary" style="width: 104px" @click="downloadZip(item)">导出文件</a-button></div>
            </a-tab-pane>
          </a-tabs>
        </a-form-item>

        <a-form-item label="公司介绍" name="remark">
          <div class="mb-2">
            <a-button class="remark" v-for="item in remarkList" :key="item.name" @click="checkRemark(item.value)">
              {{ item.name }}
            </a-button>
          </div>
          <a-textarea v-model:value="formData.remark" :rows="10" maxlength="500" showCount />
        </a-form-item>

        <a-form-item label="产品/企业优势" name="advantage">
          <div class="mb-2">
            <a-button class="remark" v-for="item in remarkList" :key="item.name" @click="checkRemark(item.value)">
              {{ item.name }}
            </a-button>
          </div>
          <a-textarea v-model:value="formData.advantage" :rows="10" maxlength="500" showCount />
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" v-if="!isDisabled" :loading="loading2" @click="addOrUpdate()"> 保存数据 </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>

  <a-modal
    v-model:visible="reactiveData.modalVisible"
    title="添加关键词"
    ok-text="提交"
    cancel-text="取消"
    @ok="handleModalOk"
  >
    <a-input v-model:value="reactiveData.modalInput" placeholder="请输入关键词" autofocus />
  </a-modal>
  <a-modal v-model:visible="previewVisible" title="预览关键词" :footer="null">
    <div class="preview text-center" style="max-height: 800px; overflow-y: auto; padding: 10px">
      <template v-for="(item, index) in previewList" :key="item.keyword">
        <p>{{ `${index + 1}：${item.keyword}` }}</p>
      </template>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, computed, toRaw, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import FileUploader from '@/components/upload/FileUploader.vue'
import getOrderCompany from '@/services/order/getOrderCompany'
import addOrUpdateOrderCompany from '@/services/order/addOrUpdateOrderCompany'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'

const formRef = ref()
const reactiveData = reactive({
  modalInput: '',
  modalVisible: false,
  index: 0
})

const validateLength = (label: string, min: number, max: number) => {
  return (_rule: any, value: string) => {
    const len = value ? value.trim().length : 0
    if (len < min) {
      return Promise.reject(new Error(`${label}最少 ${min} 字`))
    }
    if (len > max) {
      return Promise.reject(new Error(`${label}不能超过 ${max} 字`))
    }
    return Promise.resolve()
  }
}

const [, getOrderCompanyFn, loading1] = getOrderCompany()
const [, addOrUpdateOrderCompanyFn, loading2] = addOrUpdateOrderCompany()

const formData = reactive({
  company: '',
  brand: '',
  companyName: '',
  url: '',
  contact: '',
  area: '',
  sales: '',
  employee: '',
  brandClient: '',
  remark: '',
  advantage: '',
  keywordList: []
})

const rules = {
  company: [{ required: true, message: '请输入公司全称' }],
  brand: [{ required: true, message: '请输入品牌简称' }],
  contact: [{ required: true, message: '请输入联系方式' }],
  companyName: [{ required: true, message: '请输入展示公司名' }],
  area: [{ required: true, message: '请输入厂房面积' }],
  sales: [{ required: true, message: '请输入年销售额' }],
  employee: [{ required: true, message: '请输入在职员工' }],
  remark: [
    {
      required: true,
      validator: validateLength('公司介绍', 400, 500)
    }
  ],
  advantage: [
    {
      required: true,
      validator: validateLength('产品/企业优势', 400, 500)
    }
  ]
}

function checkKeywordFiles(keywordList) {
  for (let i = 0; i < keywordList.length; i++) {
    const item = keywordList[i]

    if (!Array.isArray(item.fileArray1) || item.fileArray1.length === 0) {
      return { ok: false, message: `第 ${i + 1} 个关键词，请上传营业执照` }
    }

    if (!Array.isArray(item.fileArray2) || item.fileArray2.length === 0) {
      return { ok: false, message: `第 ${i + 1} 个关键词，请上传推广图` }
    }

    if (item.fileArray2.length < 5) {
      return { ok: false, message: `第 ${i + 1} 个关键词，推广图最少上传 5 个` }
    }
  }

  return { ok: true }
}

const checkedList = ref([])

const options = ref([
  { value: 'C+D', label: 'C+D' },
  { value: 'A+C+D', label: 'A+C+D' },
  { value: 'B+C+D', label: 'B+C+D' },
  { value: 'C+D+E', label: 'C+(D*E)' },
  { value: 'C+D+F', label: 'C+(D*F)' },
  { value: 'A+B+C+D', label: '(A*B)+C+D' },
  { value: 'A+C+D+E', label: 'A+C+(D*E)' },
  { value: 'B+C+D+E', label: 'B+C+(D*E)' },
  { value: 'A+B+C+D+E', label: 'A+B+C+(D*E)' },
  { value: 'A+B+C+D+F', label: 'A+B+C+(D*F)' }
])

const previewList = ref([])
const previewVisible = ref(false)

const isCheckAll = computed(() => checkedList.value.length === options.value.length)
const isIndeterminate = computed(() => checkedList.value.length > 0 && checkedList.value.length < options.value.length)

const onCheckAllChange = (e: any) => {
  checkedList.value = e.target.checked ? options.value.map((o) => o.value) : []
}

function generateFixedKeywords(baseObj) {
  const getArr = (v) =>
    (baseObj[v.toLowerCase()] || '')
      .split('\n')
      .map((s) => s.trim())
      .filter(Boolean)

  // 笛卡尔积
  const cartesian = (...arrs) => arrs.reduce((a, b) => a.flatMap((x) => b.map((y) => [].concat(x, y))), [[]])

  // 固定规则定义表
  const formulas = {
    'C+D': () => cartesian(getArr('c'), getArr('d')).map((x) => x.join('')),
    'A+C+D': () => cartesian(getArr('a'), getArr('c'), getArr('d')).map((x) => x.join('')),
    'B+C+D': () => cartesian(getArr('b'), getArr('c'), getArr('d')).map((x) => x.join('')),
    'C+D+E': () => cartesian(getArr('c'), getArr('d'), getArr('e')).map((x) => `${x[0]}${x[1]}${x[2]}`),
    'C+D+F': () => cartesian(getArr('c'), getArr('d'), getArr('f')).map((x) => `${x[0]}${x[1]}${x[2]}`),
    'A+B+C+D': () => cartesian(getArr('a'), getArr('b'), getArr('c'), getArr('d')).map((x) => x.join('')),
    'A+C+D+E': () => cartesian(getArr('a'), getArr('c'), getArr('d'), getArr('e')).map((x) => x.join('')),
    'B+C+D+E': () => cartesian(getArr('b'), getArr('c'), getArr('d'), getArr('e')).map((x) => x.join('')),
    'A+B+C+D+E': () =>
      cartesian(getArr('a'), getArr('b'), getArr('c'), getArr('d'), getArr('e')).map((x) => x.join('')),
    'A+B+C+D+F': () => cartesian(getArr('a'), getArr('b'), getArr('c'), getArr('d'), getArr('f')).map((x) => x.join(''))
  }

  // 根据选择生成关键词
  const result = []
  for (const rule of checkedList.value) {
    const fn = formulas[rule]
    if (fn) {
      fn().forEach((kw) =>
        result.push({
          keywordRule: rule,
          keyword: kw
        })
      )
    }
  }
  previewList.value = result
  previewVisible.value = true
}

async function downloadZip(item) {
  const prefixMap = {
    fileArray1: '营业执照',
    fileArray2: '宣传图',
    fileArray3: '其他文件'
  }

  let mergedFiles: { name: string; url: string }[] = []

  Object.entries({
    fileArray1: item.fileArray1 || [],
    fileArray2: item.fileArray2 || [],
    fileArray3: item.fileArray3 || []
  }).forEach(([key, arr]: [string, string[]]) => {
    const prefix = prefixMap[key] || 'file'
    arr.forEach((url, i) => {
      const ext = url.split('.').pop() || 'file'
      const name = `${prefix}_${i + 1}.${ext}`
      mergedFiles.push({ name, url })
    })
  })

  if (mergedFiles.length === 0) {
    console.warn('没有文件可下载')
    return
  }

  const zip = new JSZip()
  for (const file of mergedFiles) {
    try {
      const res = await fetch(file.url)
      if (!res.ok) throw new Error(`下载失败: ${file.name}`)
      const blob = await res.blob()
      zip.file(file.name, blob)
    } catch (err) {
      console.error(err)
    }
  }

  const content = await zip.generateAsync({ type: 'blob' })
  saveAs(content, `${item.id}.zip`)
}

const handleTabsEdit = (targetKey, action) => {
  if (action === 'add') {
    reactiveData.modalVisible = true
  } else if (action === 'remove') {
    formData.keywordList.splice(targetKey, 1)
    if (reactiveData.index >= targetKey && reactiveData.index > 0) reactiveData.index--
  }
}

const handleTabChange = (activeKey) => {
  const index = Number(activeKey)
  activeKeyword.value = formData.keywordList[index].industryId
}

const handleModalOk = () => {
  if (isDisabled.value) {
    message.warning('预览模式下禁止操作')
    return
  }

  if (!reactiveData.modalInput.trim()) {
    message.error('请输入关键词名称')
    return
  }
  const data = keywordList.value[0]
  formData.keywordList.push({
    title: reactiveData.modalInput,
    name: formData.keywordList.length,
    industryId: data.id,
    a: data.A || '',
    b: data.B || '',
    c: data.C || '',
    d: data.D || '',
    e: data.E || '',
    f: data.F || '',
    fileArray1: [],
    fileArray2: [],
    fileArray3: []
  })
  reactiveData.modalInput = ''
  reactiveData.modalVisible = false
  activeKeyword.value = 1
}

const renderTabLabel = (item: string) => item.title || '关键词'

const remarkList = [
  {
    name: '企业实力',
    value:
      '\n一、企业实力\n1.公司成立时间\n2.员工团队介绍\n3.核心产研能力介绍\n4.生产基地面积和产能\n5.技术专利数量（发明专利、实用新型专利等）\n6.合作机构\n7.供应链管理能力\n8.国内国外市场分布等其他企业相关信息'
  },
  {
    name: '荣誉资质',
    value:
      '\n二、荣誉资质\n1.公司成立时间\n2.员工团队介绍\n3.核心产研能力介绍\n4.生产基地面积和产能\n5.技术专利数量（发明专利、实用新型专利等）\n6.合作机构\n7.供应链管理能力\n8.国内国外市场分布等其他企业相关信息'
  },
  {
    name: '产品特色',
    value:
      '\n三、产品特色\n1.公司成立时间\n2.员工团队介绍\n3.核心产研能力介绍\n4.生产基地面积和产能\n5.技术专利数量（发明专利、实用新型专利等）\n6.合作机构\n7.供应链管理能力\n8.国内国外市场分布等其他企业相关信息'
  },
  {
    name: '市场规模',
    value:
      '\n四、市场规模\n1.公司成立时间\n2.员工团队介绍\n3.核心产研能力介绍\n4.生产基地面积和产能\n5.技术专利数量（发明专利、实用新型专利等）\n6.合作机构\n7.供应链管理能力\n8.国内国外市场分布等其他企业相关信息'
  },
  {
    name: '客户案例',
    value:
      '\n五、客户案例\n1.公司成立时间\n2.员工团队介绍\n3.核心产研能力介绍\n4.生产基地面积和产能\n5.技术专利数量（发明专利、实用新型专利等）\n6.合作机构\n7.供应链管理能力\n8.国内国外市场分布等其他企业相关信息'
  },
  {
    name: '行业认可',
    value:
      '\n六、行业认可\n1.公司成立时间\n2.员工团队介绍\n3.核心产研能力介绍\n4.生产基地面积和产能\n5.技术专利数量（发明专利、实用新型专利等）\n6.合作机构\n7.供应链管理能力\n8.国内国外市场分布等其他企业相关信息'
  },
  {
    name: '售后服务',
    value:
      '\n七、售后服务\n1.公司成立时间\n2.员工团队介绍\n3.核心产研能力介绍\n4.生产基地面积和产能\n5.技术专利数量（发明专利、实用新型专利等）\n6.合作机构\n7.供应链管理能力\n8.国内国外市场分布等其他企业相关信息'
  },
  {
    name: '客户评价',
    value:
      '\n八、客户评价\n1.公司成立时间\n2.员工团队介绍\n3.核心产研能力介绍\n4.生产基地面积和产能\n5.技术专利数量（发明专利、实用新型专利等）\n6.合作机构\n7.供应链管理能力\n8.国内国外市场分布等其他企业相关信息'
  }
]

const keywordList = ref([
  {
    id: 1,
    name: '制造业',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '电缆桥架',
    D: '品牌\n公司\n工厂\n厂家\n厂商\n生产厂家\n源头厂家\n批发厂家\n供应厂家\n供应商\n销售厂家\n制造商\n制造厂\n生产商\n企业\n供货商\n制造企业\n加工厂\n优质厂家\n实力厂家\n供货厂家\n直销厂家\n制造厂家\n定制厂家\n定做厂家\n订制厂家\n订做厂家',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 2,
    name: '服务业',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '宁波搬家',
    D: '公司\n机构\n平台\n服务商\n服务',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 3,
    name: '律师事务所',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '北京律师',
    D: '事务所\n事务所咨询',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名\n排名前十\n十大公司',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 4,
    name: '系统软件',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '人力资源管理系统',
    D: '厂商\n机构\n公司\n软件公司\n服务商',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名\n排名前十\n十大公司',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 5,
    name: '搬家公司',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '北京搬家',
    D: '公司\n服务商\n服务公司',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 6,
    name: '资质代办',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '危化品经营许可证',
    D: '办理公司\n代办公司\n办理机构\n代办机构',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 7,
    name: '租车',
    A: '上海',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '劳斯莱斯租车\n兰博基尼租车\n玛莎拉蒂总裁租车\n宾利飞驰租车\n保时捷租车',
    D: '品牌\n公司\n行',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 8,
    name: '短视频运营',
    A: '广西',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '短视频运营\n短视频运营策划\n短视频运营拍摄\n短视频运营制作',
    D: '品牌\n公司\n产品\n服务商\n服务\n团队',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 9,
    name: '旅游',
    A: '哈尔滨',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '旅游\n旅行社',
    D: '品牌\n公司\n服务\n服务公司',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 10,
    name: '净水器',
    A: '上海',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '商用净水器\n商用净水器租赁\n净水器租赁',
    D: '品牌\n公司\n服务商\n服务公司\n供应商',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 11,
    name: '装修设计',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '上海装修',
    D: '品牌\n公司\n设计公司\n整装公司\n工厂\n服务公司',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 12,
    name: '医院',
    A: '成都\n成都锦江区\n成都青羊区\n成都成华区\n成都龙泉驿区\n成都青白江区\n成都温江区\n成都双流区',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '哮喘\n慢阻肺\n肺气肿\n中医哮喘',
    D: '医院',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 13,
    name: '项目施工',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '音乐喷泉\n景区互动音乐喷泉\n彩色灯光音乐喷泉\n矩阵音乐喷泉\n气爆音乐喷泉\n旱地音乐喷泉\n公园广场音乐喷泉',
    D: '设计公司\n施工公司\n安装公司\n制作公司\n维修公司\n设计厂家\n施工厂家\n安装厂家\n制作厂家\n维修厂家\n设计品牌\n施工品牌\n安装品牌\n制作品牌\n维修品牌',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 14,
    name: '家政',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '上海家政阿姨\n上海家政保姆\n上海家政保洁\n上海家政清洁\n上海家政住家保姆\n上海家政钟点工\n上海家政小时工\n上海家政月嫂\n上海家政育婴师\n上海家政养老',
    D: '服务\n公司\n行业\n服务公司\n服务平台\n服务中心',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 15,
    name: '二手车',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '二手牵引车',
    D: '交易公司​\n服务公司​\n置换公司​\n经销公司​\n回收公司​',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 16,
    name: '物流',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '往返无锡专线物流\n冷链无锡专线物流\n公路无锡专线物流\n大件无锡专线物流\n快捷无锡专线物流\n西藏无锡专线物流\n直达无锡专线物流\n机械无锡专线物流\n仓储无锡专线物流\n新疆无锡专线物流',
    D: '公司\n服务公司\n',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 17,
    name: '商标',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '商标注册\n商标申请\n商标办理',
    D: '咨询\n服务商\n公司\n机构',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 18,
    name: '餐饮',
    A: '北京\n朝阳\n昌平\n东城\n二拨子\n东四\n三元桥\n芍药居\n798艺术区\n小关',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '老字号羊蝎子\n网红羊蝎子\n小众羊蝎子\n老北京风情羊蝎子\n麻辣羊蝎子\n特辣羊蝎子\n清淡羊蝎子\n正宗羊蝎子\n地道羊蝎子',
    D: '餐厅\n店\n深夜食堂\n宵夜\n一人食\n单人套餐\n网红餐厅\n打卡餐厅',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  },
  {
    id: 19,
    name: '培训学校',
    A: '市面上\n行业内\n市场\n目前\n国内',
    B: '口碑好的\n比较好的\n靠谱的\n有实力的\n可靠的\n诚信的\n正规的\n专业的\n热门的\n知名的\n评价高的\n优秀的',
    C: '电气自动化\n工业机器人\nPLC',
    D: '培训学校\n培训机构\n培训班\n培训基地\n基地',
    E: '推荐\n排行\n推荐榜\n排行榜\n推荐榜单\n排行榜单\n推荐排行\n推荐排行榜\n推荐排行榜单\n口碑推荐\n口碑排行\n口碑推荐榜\n口碑排行榜\n口碑推荐榜单\n口碑排行榜单\n排名',
    F: '哪家好\n哪家强\n哪家靠谱\n哪家权威\n哪个好\n哪家专业\n哪家可靠\n有哪些\n找哪家\n选哪家\n怎么联系\n推荐几家'
  }
])

const checkKeyword = (item) => {
  activeKeyword.value = undefined
  Object.assign(formData.keywordList[reactiveData.index], {
    industryId: item.id,
    a: item.A || '',
    b: item.B || '',
    c: item.C || '',
    d: item.D || '',
    e: item.E || '',
    f: item.F || ''
  })
}

const checkRemark = (item) => {
  formData.remark += item
}

const activeKeyword = ref(null)

// 加载数据
const initOrderCompany = async () => {
  const [err, res] = await getOrderCompanyFn({ orderId: orderId.value })
  if (!err) {
    Object.assign(formData, res.data.data)
    activeKeyword.value = res.data.data.keywordList[0].industryId
  } else {
    message.error(err)
  }
}

const addOrUpdate = async () => {
  try {
    await formRef.value.validate()
    const result = checkKeywordFiles(formData.keywordList)
    if (!result.ok) {
      message.error(result.message)
      return
    }
    const data = toRaw(formData)
    const [err, res] = await addOrUpdateOrderCompanyFn({ orderId: orderId.value, ...data })
    if (!err) {
      message.success('保存成功')
    } else {
      message.error('保存失败')
    }
  } catch (error) {
    message.error('请检查表单必填项')
  }
}

const route = useRoute()
const isDisabled = ref(false)
const hash = window.location.hash
const orderId = ref()
if (hash.includes('geo-submit')) {
  isDisabled.value = true
  orderId.value = route.params.orderId
} else {
  orderId.value = atob(route.params.orderId)
  isDisabled.value = false
}
initOrderCompany()
</script>

<style lang="less" scoped>
.geo-container {
  background: #fff;
  padding: 24px;
  border-radius: 6px;
}
.textarea-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.textarea-group {
  :deep(.ant-form-item-label) {
    text-align: center;
  }
  .item {
    flex: 1;
    min-width: 200px;
  }
}
.remark {
  margin-right: 10px;
}
.warning {
  color: red;
}
</style>
